<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        
        function move(ele, target,cb) {
            let obj = {}
            for (let key in target) {
                obj[key] = setInterval(() => {
                    console.log("setInterval");
                    let leftNum = parseInt(getComputedStyle(ele, null)[key]);
                    // 目标位置 和当前位置对比 
                    // 0(当前位置) ----> 300（目标位置） 右  + 
                    // 300（当前位置）---> 0（目标位置） 左 减 
                    // console.log(leftNum<target[key]?console.log("向右"):console.log("向左"));
                    // 如果向右那么速度设置为正，否则设置为负
                    let speed = 5*(leftNum<target[key]?1:-1);
                    if (leftNum === target[key]) {
                        // console.log("停止");
                        clearInterval(obj[key]);
                        cb && cb();
                    } else {
                        // 拿到 方块的left 之后 + 一个速度 
                        // left + 5 一定会向右跑
                        // 如果left + 速度（speed） 就会向右跑 ，如果要向左跑 需要left-速度（speed）
                        // 判断 方块应该需要向哪个方向走  如果向右走应该加一个速度 ，如果向左走需要减一个速度
                        ele.style[key] = leftNum + speed + "px";
                    }
                }, 50);
            }
        }

        let boxEle = document.querySelector(".box");
        // 1.函数如何控制向下移动？？？
        // move(boxEle, { left: 300},function(){
        //     move(boxEle, { left: 0})
        // });



        //注意： 底下代码是一个回调地狱：回调函数层层嵌套回调函数
        // 后期通过promise来解决回调地狱问题
        move(boxEle, { left: 300},function(){
            console.log("运动结束111");
            move(boxEle, { top: 300},function(){
                console.log("运动结束222");
                move(boxEle,{left:0},function(){
                    console.log("运动结束333");
                    move(boxEle,{top:0},function(){
                        console.log("运动结束444")
                    })
                })
            }); 
        });  //向右的速度 
        // move(ele, { top: 300}); 
        // 给一个向下的速度
        // 2.如何实现 方块向先右移动结束后 然后在向下移动？？
        // 要获取 运动结束的时刻？？？
        // 3. 如何反方向移动？
        // 思考 我是通过setinterval 来实现的 ，能不能通过settimeout实现？？
        
        
        
        
        // 对象保存下标 ；
        // let obj = {};
        // for(let i=1;i<3;i++){
        //     // console.log(i);
        //     // var timer = i;
        //     obj[i] = i;
        // }
        // console.log(obj);


    </script>
</body>

</html>